<template>
  <!-- 导入表 -->
  <el-dialog :title="title" v-model="visible" width="900px" append-to-body v-if="visible">
    <el-form :model="formData" :rules="rules" ref="form" :inline="true">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="日程标题" prop="scheduleTitle">
            <el-input
              v-model="formData.scheduleTitle"
              placeholder="请输入日程标题"
              clearable
              :style="{width: '810px'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="日程类型" prop="scheduleType">
            <el-select
              v-model="formData.scheduleType"
              placeholder="请选择"
              clearable
              :style="{width: '810px'}"
            >
              <el-option
                v-for="(item, index) in dateType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="日程时间" prop="time">
            <el-date-picker
              :style="{width: '810px'}"
              v-model="time"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="紧急程度" prop="urgencyDegree">
            <el-select
              v-model="formData.urgencyDegree"
              placeholder="请选择"
              clearable
              :style="{width: '810px'}"
            >
              <el-option
                v-for="(item, index) in Options2"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="提醒时间" prop="reminderType">
            <el-select
              v-model="formData.reminderType"
              placeholder="请选择"
              clearable
              :style="{width: '810px'}"
            >
              <el-option
                v-for="(item, index) in Options3"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="重复提醒" prop="repeatReminder">
            <el-select
              v-model="formData.repeatReminder"
              placeholder="请选择"
              clearable
              :style="{width: '810px'}"
            >
              <el-option
                v-for="(item, index) in Options4"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="日程描述" prop="scheduleDesc">
            <el-input
              v-model="formData.scheduleDesc"
              placeholder="请输入日程描述"
              clearable
              :style="{width: '810px'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="日程地点" prop="scheduleAddress">
            <el-input
              v-model="formData.scheduleAddress"
              placeholder="请输入日程地点"
              clearable
              :style="{width: '810px'}"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="参与人" prop="participant">
            <el-row style="margin-top:0px;">
              <el-col :span="22">
                <el-input
                  style="width: 695px;margin-left:15px"
                  v-model="peopleId"
                  placeholder="请选择参与人"
                />
              </el-col>
              <el-col :span="2">
                <el-button
                  style="width:70px;height:32px;margin-top:-3px;"
                  type="primary"
                  @click="addPeople"
                  size="default"
                >选择人员</el-button>
              </el-col>
            </el-row>
            <!-- <div class="clickBtn" @click="addPeople">
              <el-icon>
                <el-icon-plus></el-icon-plus>
              </el-icon>
            </div>
            <div class="right-tag">
              <span>已选择{{xzryMsg.length}}</span>
              <el-tag
                style="margin-left:10px"
                v-for="(tag,index) in xzryMsg"
                :key="index"
                class="mx-1"
                closable
                :disable-transitions="false"
                @close="handleClose(index)"
              >{{ tag.label }}</el-tag>
            </div>-->
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancle">取 消</el-button>
      </div>
    </template>
    <el-dialog title="选择人员" v-model="open" width="70%" append-to-body>
      <userList @userId="userId" :xzryMsg="xzryMsg" v-if="open"/>
      <template #footer>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm2">确 定</el-button>
          <el-button @click="cancle2">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-dialog>
</template>

<script>
import api from "@/api";
import { treeselect } from "@/api/system/dept";
import Pagination from "@/components/Pagination/index.vue";
import userList from "./compontent/user.vue";
import { iteratee } from "lodash-es";
import { log } from "util";
export default {
  components: { Pagination, userList },
  props: {
    formList: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      title: "新增",
      defaultProps: {
        children: "children",
        label: "label"
      },
      //选择人员
      xzryMsg: [],
      peopleId: [],
      peopleName: "",
      open: false,
      // 部门树选项
      deptOptions: undefined,
      // 遮罩层
      visible: false,
      // 选中数组值
      tables: [],
      //日程时间
      time: [],
      //表单数据
      formData: {},
      //表单效验
      rules: {
        scheduleTitle: [
          { required: true, message: "日程标题不能为空", trigger: "blur" }
        ],
        scheduleType: [
          { required: true, message: "日程类型不能为空", trigger: "change" }
        ]
      },
      dateType: [
        {
          label: "个人",
          value: "1"
        },
        {
          label: "组织内部",
          value: "2"
        }
      ], //日程类型
      Options2: [
        {
          label: "一般",
          value: "1"
        },
        {
          label: "紧急",
          value: "2"
        },
        {
          label: "非常紧急",
          value: "3"
        }
      ], //紧急程度
      Options3: [
        {
          label: "不提醒",
          value: "1"
        },
        {
          label: "开始时",
          value: "2"
        },
        {
          label: "提前5分钟",
          value: "3"
        },
        {
          label: "提前10分钟",
          value: "4"
        },
        {
          label: "提前15分钟",
          value: "5"
        },
        {
          label: "提前30分钟",
          value: "6"
        },
        {
          label: "提前一小时",
          value: "7"
        }
      ], //提醒时间
      Options4: [
        {
          label: "不重复",
          value: "1"
        },
        {
          label: "每天",
          value: "2"
        },
        {
          label: "每周",
          value: "3"
        },
        {
          label: "每月(当日)",
          value: "4"
        },
        {
          label: "每年(当日)",
          value: "5"
        }
      ] //重复提醒
    };
  },
  watch: {
    formList: {
      handler(val, old) {
        this.formData = val;
        if(val.beginTime != null || val.endTime != null){
          this.time[0] = val.beginTime;
          this.time[1] = val.endTime;
        }
         this.xzryMsg = val.participant
              ? val.participant.split(',').map((item)=>{return {userId:item}})
              : [];
        this.peopleId = [];
        this.peopleId.push(val.receiverText)
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.xzryMsg = [];
    this.getTreeselect();
  },
  methods: {
    userId(val) {
      if (val) {
        this.xzryMsg = [];
        this.peopleId = [];
        val.map(item => {
          this.peopleId.push(item.userName);
          this.xzryMsg.push({
            userId: item.userId,
            userName: item.userName
          });
        });
      }
    },
    /**数组转换数据 */
    format(val) {
      return val ? val.split(",") : [];
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 显示弹框
    show() {
      this.visible = true;
    },
    addPeople() {
      this.open = true;
    },
    /**确定操作 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.time.length ==0) {
            return this.$message.warning("日程时间不能为空");
          }
          if (this.time.length > 0) {
            this.formData.beginTime = this.time[0];
            this.formData.endTime = this.time[1];
          }
          // this.formData.participant = JSON.stringify(this.xzryMsg);
           this.formData.participant = this.xzryMsg.length
            ? this.xzryMsg
                .map(res => {
                  return res.userId;
                })
                .join(",")
            : "";
          if (this.formData.id != undefined) {
            api.zfSchedule.edit(this.formData).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.$refs.form.resetFields();
                this.time.length = 0;
                this.peopleId = [];
                this.visible = false;
                this.$emit("ok");
              }
            }).catch(err=>{
               this.$message.error(err.msg);
            });
          } else {
            api.zfSchedule.add(this.formData).then(res => {
              if (res.code == 200) {
                this.$message.success(res.msg);
                this.$refs.form.resetFields();
                this.time.length = 0;
                this.peopleId = [];
                this.visible = false;
                this.$emit("ok");
              }
            }).catch(err=>{
               this.$message.error(err.msg);
            });
          }
        }
      });
    },
    submitForm2() {
      this.open = false;
    },
    cancle() {
      this.visible = false;
      this.$refs.form.resetFields();
    },
    cancle2() {
      this.open = false;
    }
  }
};
</script>
<style lang="less" scoped>
.clickBtn {
  width: 50px;
  height: 50px;
  border: dashed 4px #39a3ff;
  border-radius: 50%;
  .el-icon {
    font-size: 30px;
    font-weight: bold;
    color: #39a3ff;
    margin-left: 6px;
    margin-top: 6px;
  }
}
.right-tag {
  width: 650px;
  border: dashed 1px;
  margin-left: 10px;
}
</style>
